<template>
  <div class="gsap">
    <div class="img">
      <img alt="" class="img_png" src="../assets/police_car.png">
    </div>
  </div>
</template>
<script setup>
import {gsap} from 'gsap'
import {nextTick} from "vue";
import {ScrollTrigger} from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger)
nextTick(() => {

  const img = document.getElementsByClassName('img_png')
  gsap.fromTo(img, {
    x: 0,
    opacity: 1
  }, {
    x: function (_, target) {
      return document.documentElement.clientWidth - target.offsetWidth
    },
    duration: 3,
    ease: 'none',
    scrollTrigger: {
      trigger: img,
      scrub: true,  //表示与动画关联
      start: 'center center',
      pin: true
    }
  })
})
</script>

<style lang="scss" scoped>
.gsap {
  display: flex;
  flex-direction: row;
}

.img_png {
  width: 80px;
  height: 80px;
}
</style>